<template>
  <div class="container">
    <div class="login-wrapper">
      <div class="header">登录</div>
      <div class="form-wrapper">
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
          <!-- 选择用户角色类型 -->
          <el-form-item label="登录类型" prop="roleType">
            <el-select v-model="loginForm.roleType" placeholder="请选择登录类型">
              <el-option label="参保人员" value="InsuredPerson"></el-option>
              <el-option label="工作人员" value="Staff"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入身份证号" class="input-item"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
                class="input-item"
            ></el-input>
          </el-form-item>
          <el-button type="primary" class="btn" @click="handleLogin">登录</el-button>
        </el-form>
      </div>
      <div class="msg">
        没有账户?
        <router-link to="/signup">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import jwtDecode from 'jwt-decode';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const loginForm = ref({
      username: '',
      password: '',
      roleType: '', // 新增属性用于保存用户选择的登录类型
    });

    const loginRules = ref({
      roleType: [
        { required: true, message: '请选择登录类型', trigger: 'change' },
      ],
      username: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
    });

    const loginFormRef = ref(null);

    const handleLogin = () => {
      loginFormRef.value.validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/user/login', null, {
            params: {
              username: loginForm.value.username,
              password: loginForm.value.password,
              role: loginForm.value.roleType
            },
          })
            .then((response) => {
              const token = response.data.token;
              console.log(jwtDecode(token))
              if (token) {
                localStorage.setItem('token', token);
                localStorage.setItem('username', loginForm.value.username);

                const role = loginForm.value.roleType; // 使用用户选择的界面类型

                ElMessage({
                  message: '登录成功',
                  type: 'success',
                  duration: 2000,
                });
                const username = loginForm.value.username;
                console.log('即将传递的用户名参数:', username);
                // 根据选择的界面类型跳转
                if (role === "InsuredPerson") {
                  router.push({ name: 'Layout', params: { username } });
                } else {
                  router.push({ name: 'StaffLayout', params: { username } });
                }
              } else {
                ElMessage.error('登录失败，无法获取令牌');
              }
            })
            .catch((error) => {
              console.error('登录失败:', error);
              ElMessage.error('登录失败，请检查用户名和密码');
            });
        } else {
          console.log('验证失败');
        }
      });
    };

    return {
      loginForm,
      loginRules,
      loginFormRef,
      handleLogin,
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: linear-gradient(to right, #808080, #a6c1ee);
}

.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
}

.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  border: none;
  border-bottom: 1px solid rgb(128, 125, 125);
  background: none;
  font-size: 15px;
  outline: none;
}

.input-item::placeholder {
  text-transform: uppercase;
}

.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(to right, #a6c1ee, #808080);
  color: #fff;
}

.msg {
  text-align: center;
  line-height: 88px;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>
